<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .zi_lable{
        font-weight:bold;
        width: 96px;
    }
    .pass_inp{
        width: 280px;
        height: 40px;
        margin-top: 15px;
        border: 2px solid #7BA7AB;
        border-radius: 5px;
        background: #F9F0DA;
        color: #9E9C9C;
        font-size: 20px;
        line-height: 30px;
    }
    #changePassword-btn{
        background: #009688;
        height: 43px;
        width: 281px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
        margin-left: 98px;
        margin-top: 15px;
        font-size: 18px;
    }
    #msg{
        font-size: 30px;
        color: #86cfda;
    }
</style>
<body>
<div class="upd_div">
    <h2>修改密码</h2>
    <form id="changePassword-form">
        <label class="zi_lable">输入旧密码：</label>
        <input id="oldPassword" name="oldPassword" placeholder="请输入旧密码"
               class="pass_inp" type="password"> <br>

        <label class="zi_lable">输入新密码：</label>
        <input id="newPassword" name="newPassword" placeholder="请输入新密码"
               class="pass_inp" type="password"> <br>

        <label class="zi_lable">确认新密码：</label>
        <input id="verifyPassword" placeholder="请确认新密码"
               name="verifyPassword" class="pass_inp" type="password">
        <span id="msg"></span><br>
        <button id="changePassword-btn" type="button">点击修改</button>
    </form>
</div>
    <script src="../../style/jquery-3.3.1.js"></script>
    <script>
        //修改密码按钮
        $("#changePassword-btn").click(function (){
            //验证新密码和确认密码是否相同
            //如果不相同则不继续提交表单
            if (!verify())
                return;
            //验证通过则进行表单提交
            $.ajax({
                type:"post",
                url:"../../Account/changePassword",
                data:$("#changePassword-form").serialize(),
                dataType:"json",
                success:function (data){
                    alert(data.message);

                }
            })
        });
        $("#verifyPassword").blur(function (){
            verify();
        })
        //确认两次密码是否相同
        function verify(){
            let newPassword = $("#newPassword").val();
            let verifyPassword = $("#verifyPassword").val();
            let oldPassword = $("#oldPassword").val();


            if(oldPassword==newPassword){
                $("#msg").text("旧密码不能和新密码一样")
                return false;
            }else if(newPassword ==verifyPassword){
                $("#msg").text("√")
                return true;
            }
            $("#msg").text("两次密码不一致")

        }

    </script>
</body>
</html>